<template>
<kb-layout> 
	<view class="bg">
		<view style="margin :20rpx 20rpx;">
		<up-subsection :list="list" font-size="16px"
		 @change="i=>{paymethod_index=i; clearResult()}"
		:current="paymethod_index"></up-subsection>
		</view>
		<view class="form-table">
			<up-form labelPosition="left" ref="syForm" :labelStyle="{
			 	fontSize:'16px',
			 }" :model="formdata">
				<up-form-item v-if="paymethod_index==0|| paymethod_index==2"
				 label="商业贷款总额" prop="sy_total" ref="sy_total" 
				 borderBottom="true" labelWidth="120">
					<up-input type="number" v-model="formdata.sy_total" border="0">
						<template #suffix>
							<up-text size="12" text="万元" margin="0 3px 0 0" type="tips"></up-text>
						</template>
					</up-input>
				</up-form-item>
				
				<up-form-item v-if="paymethod_index==1|| paymethod_index==2"
				 label="公积金贷款总额" prop="gjj_total" ref="gjj_total" borderBottom="true" labelWidth="120">
					<up-input type="number" v-model="formdata.gjj_total" border="0">
						<template #suffix>
							<up-text size="12" text="万元" margin="0 3px 0 0" type="tips"></up-text>
						</template>
					</up-input>
				</up-form-item>
				
				<up-form-item label="公积金贷款利率" 
				 v-if="paymethod_index==1|| paymethod_index==2"
				 prop="gjj_lilv_index" ref="gjj_lilv_index" borderBottom="true"
					labelWidth="120">
					<up-input type="digt" v-model="formdata.gjj_lilv_index" border="0">
						<template #suffix>
							<up-text size="12" text="%" margin="0 3px 0 0" type="tips"></up-text>
						</template>
					</up-input>
				</up-form-item>
				
				
				<up-form-item label="总 贷 款 年 限" prop="sy_year" ref="sy_year" borderBottom="true" labelWidth="120">
					<view style="width: 100%; display: flex;">
					<view style="width: 90%;">
						<up-slider :showValue="true" 
						blockColor="rgb(60, 156, 255)"
						 v-model="formdata.sy_year" step="1" min="5" max="50"></up-slider>
					</view>
					<up-text text="年" size="12" margin="0 3px 0 0" type="tips"></up-text>
					</view>
					<!-- <up-input type="number" v-model="formdata.sy_year" border="0">
						<template #suffix>
							<up-text text="年" margin="0 3px 0 0" type="tips"></up-text>
						</template>
					</up-input> -->
				</up-form-item>
				<!--  -->
				<up-form-item  v-if="paymethod_index==0|| paymethod_index==2" 
				 label="LPR基础利率" prop="sy_input_lilv" ref="sy_input_lilv" borderBottom="true"
					labelWidth="120">
					<up-input type="digt" v-model="formdata.sy_input_lilv" border="0">
						<template #suffix>
							<up-text  size="12" text="%" margin="0 3px 0 0" type="tips"></up-text>
						</template>
					</up-input>
				</up-form-item>
				<!--  -->
				<up-form-item v-if="paymethod_index==0|| paymethod_index==2"
				  label="基    点" prop="sy_lilv_index" ref="sy_lilv_index" borderBottom="true"
					labelWidth="120">
					<up-input type="number" v-model="formdata.sy_lilv_index" border="0">
						<template #suffix>
							<up-text size="12" text="BP(‰)" margin="0 3px 0 0" type="tips"></up-text>
						</template>
					</up-input>
				</up-form-item>
				<!--  -->
				<up-form-item v-if="paymethod_index==0|| paymethod_index==2"
				  label="总 利 率" borderBottom="true" labelWidth="120" @click="showFloat = true; ">

					<up-text size="14" :text="sy_lilv_label"></up-text>
				</up-form-item>
			</up-form>
			<view class="up-submit">
				<up-button type="primary" 
				  @click="onSubmit">立即计算</up-button>
			</view>


		</view>
		<!--显示结果-->
		<view class='section result' v-if="benxi.month_money">
			
			<view class="restab" style="margin: 30rpx;">
			<up-subsection
			 model="subsection"
			 :list="['等额本息','等额本金']" 
			  activeColor="#f56c6c"
			  @change="index=> showway=index"
			:current="showway"></up-subsection>
		 </view>
			<!--等额本息 结果-->
			<view class='benxi' v-if="showway==0 ">
				<view class='total'>
					<view class='num'><text>{{benxi.month_money[0][1]}}</text></view>
					<view class='txt'><text class="ft30">每月月供(元)</text></view>
				</view>
				<view class='per'>
					<view class='peritem'>
						<view><text>{{benxi.accrual}}</text></view>
						<view><text class='ft14'>支付利息(万)</text></view>
					</view>
					<view class='peritem'>
						<view><text>{{benxi.all_total}}</text></view>
						<view><text class='ft14'>还款总额(万)</text></view>
					</view>
				</view>
				<view class='btitle'><text class='ft40'>还款明细</text></view>
				<view class='monthlist'>
					<view class='bhead item'>
						<view><text>期次</text></view>
						<view><text>每月月供(元)</text></view>
						<view><text>剩余(元)</text></view>
					</view>

					<view class='blist item' v-for=" (item, index) in benxi.month_money " :key="index">
						<view><text>{{item[0]}}</text></view>
						<view><text>{{item[1]}}</text></view>
						<view><text>{{item[2]}}</text></view>
					</view>

				</view>
			</view>

			<!--等额本金 结果-->
			<view class='benxi' v-if="showway==1 ">
				<view class='total'>
					<view class='num'><text>{{benjin.month_money[0][1]}}</text></view>
					<view class='txt'><text class="ft30">每月月供(元)</text></view>
				</view>
				<view class='per'>
					<view class='peritem'>
						<view><text>{{benjin.accrual}}</text></view>
						<view><text class='ft14'>支付利息(万)</text></view>
					</view>
					<view class='peritem'>
						<view><text>{{benjin.all_total}}</text></view>
						<view><text class='ft14'>还款总额(万)</text></view>
					</view>
					<view class='peritem'>
						<view><text>{{benjin.perdown}}</text></view>
						<view><text class='ft14'>每月递减(元)</text></view>
					</view>
				</view>
				<view class='btitle'><text class='ft40'>还款明细</text></view>
				<view class='monthlist'>
					<view class='bhead item'>
						<view><text>期次</text></view>
						<view><text>每月月供(元)</text></view>
						<view><text>剩余(元)</text></view>
					</view>

					<view class='blist item' v-for="(item , index ) in benjin.month_money" :key="index">
						<view><text>{{item[0]}}</text></view>
						<view><text>{{item[1]}}</text></view>
						<view><text>{{item[2]}}</text></view>
					</view>

				</view>
			</view>


		</view>

	</view>
	<kb-footer></kb-footer>
</kb-layout>
</template>

<script>
	export default {
		data() {
			return {
				paymethod_index: 0,
				list: ['商业贷款', '公积金贷款', '组合贷款'],
				formdata: {
					sy_total: 30,
					sy_year: 20,
					sy_input_lilv: 3.95,
					sy_lilv: '基准利率',
					/**商业贷款利率参数 */
					gjj_total: 30,
					gjj_lilv_index: 3.1,
					sy_lilv_index: 0,

				},
				benjin: {},
				benxi: {},
				fee_gjj_lilv: 0,
				showFloat: false,
				/**结果切换 */
				showway: 0,
				tabactive: ['active', 'normal']
			}
		},
		computed: {
			paymethod() {
				return this.paymethod_index + 1;
			},
			gjj_lilv_base() {
				var p1 = Math.round(this.formdata.gjj_lilv_index * 100) / 100; 
				return p1 /100;
			},
			sy_lilv_base() {
				var p1 = Math.round(this.formdata.sy_input_lilv * 100) / 100;
				var p2 = Math.round(this.formdata.sy_lilv_index * 100) / 100;
				return (p1 + p2) / 100;
			},
			sy_lilv_label() {
				if( this.paymethod_index== 0 || this.paymethod_index==2){
					var p1 = Math.round(this.formdata.sy_input_lilv * 100) / 100;
					var p2 = Math.round(this.formdata.sy_lilv_index * 100) / 10000;
					//this.sy_lilv_base =  
					return p1 + '% + ' + p2 + '% = ' + (p1 + p2) + '%';	
				}
				if( this.paymethod_index== 1){
					var p1 = Math.round(this.formdata.gjj_lilv_index * 100) / 100; 
					//this.sy_lilv_base =  
					return p1 +  '% = ' + (p1  ) + '%';	
				}
				
			}
		},
		onPullDownRefresh() {
			this.benjin = {}
			this.benxi = {}
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)

		},
		onLoad() {
			 const lilv = this.ee.searchparams?.lilv || '';
				
			if(lilv){				
				 this.formdata.sy_input_lilv = lilv.shangye? lilv.shangye : 4.2;
				 this.formdata.gjj_lilv_index = lilv.gjj ?  lilv.gjj : 3.2;
			}
		},
		methods: {
			clearResult(){
				this.benjin = {}
				this.benxi = {}
			} ,
			onSubmit() {
				 
				var form = this.formdata;
				//贷款月数	      
				var years = parseInt(form.sy_year);
				var month = years * 12;
				/**房价总额比例算 */
				/**  var daikuantotal = fee_total * (1-bill);*/
				/** 贷款总额 */

				/**组合贷款 */
				if (this.paymethod == 3) {
					/** 贷款总额 */
					var daikuan_total1 = form.sy_total * 10000;
					var daikuan_total2 = form.gjj_total * 10000;
					if (!daikuan_total1 || !daikuan_total2) {
						wx.showToast({
							title: '请输入商业和公积金贷款总额',
							icon: 'none'
						});
						return false;
					}
					var daikuan_total = daikuan_total1 + daikuan_total2
					var sy_lilv = this.getlilv(1);
					var gjj_lilv = this.getlilv(2);

					/**商业 或公积金 单独 */
				} else {
					/** 贷款总额 */
					if (this.paymethod == 1) {
						var daikuan_total = form.sy_total * 10000;
					}
					if (this.paymethod == 2) {
						var daikuan_total = form.gjj_total * 10000;
					}
					if (!daikuan_total) {
						uni.showToast({
							title: '请输入贷款总额',
							icon: 'none'
						});
						return false;
					}
					//利率获取  
					var lilv = this.getlilv(this.paymethod  );
					// console.log('利率'+lilv);
				}
				/**================ 三种计算方式==计算结果================== */
				//1.本金还款计算方式
				//月还款
				var all_total2 = 0;
				var month_money_list = [];
				var benjin = {};
				var huankuan = 0;

				for (var j = 0; j < month; j++) {
					//调用函数计算: 本金月还款额
					if (this.paymethod == 3) {
						huankuan = this.getMonthMoney2(sy_lilv, daikuan_total1, month, j) +
							this.getMonthMoney2(gjj_lilv, daikuan_total2, month, j);
					} else {
						huankuan = this.getMonthMoney2(lilv, daikuan_total, month, j);
					}

					all_total2 += huankuan;
					huankuan = Math.round(huankuan * 100) / 100;
					var tmptotal = Math.round((all_total2) * 100) / 100;
					var tmp = [(j + 1), huankuan, tmptotal];
					month_money_list.push(tmp);
					/**
					month_money_list += (j + 1) + "," + huankuan + "\n"; */
				}
				//还款总额
				var alltotal = Math.round(all_total2 * 100) / 100;
				benjin.all_total = Math.round(alltotal * 100) / 100;
				//支付利息款
				benjin.accrual = Math.round((all_total2 - daikuan_total) * 100) / 100;
				/**处理每期的剩余金额 */
				for (var j = 0; j < month; j++) {
					month_money_list[j][2] = Math.round((benjin.all_total - month_money_list[j][2]) * 100) / 100;
				}

				benjin.month_money = month_money_list;
				benjin.perdown = Math.round((benjin.month_money[0][1] - benjin.month_money[1][1]) * 100) / 100;
				/**格式化数据 */
				benjin.all_total = Math.round(benjin.all_total * 100 / 10000) / 100;
				benjin.accrual = Math.round(benjin.accrual * 100 / 10000) / 100;

				//2.本息还款计算方式
				var benxi = {};
				//月均还款 调用函数计算
				var month_money_list = [];
				if (this.paymethod == 3) {
					var month_money1 = this.getMonthMoney1(sy_lilv, daikuan_total1, month) +
						this.getMonthMoney1(gjj_lilv, daikuan_total2, month);
				} else {
					var month_money1 = this.getMonthMoney1(lilv, daikuan_total, month);
				}

				//还款总额
				var all_total1 = month_money1 * month;
				benxi.all_total = Math.round(all_total1 * 100) / 100;
				//支付利息款
				benxi.accrual = Math.round((all_total1 - daikuan_total) * 100) / 100;
				var tmptotal = benxi.all_total;
				for (var j = 0; j < month; j++) {
					var monthmoney = Math.round(month_money1 * 100) / 100;
					tmptotal = Math.round((tmptotal - monthmoney) * 100) / 100;
					var tmp = [(j + 1), monthmoney, tmptotal];
					month_money_list.push(tmp);
					/*      
					month_money_list += (j + 1) + "," + Math.round(month_money1 * 100) / 100 + "\n";
					*/
				}
				benxi.month_money = month_money_list;
				/**格式化数据 */
				benxi.all_total = Math.round(benxi.all_total * 100 / 10000) / 100;
				benxi.accrual = Math.round(benxi.accrual * 100 / 10000) / 100;

				this.benjin = benjin;
				this.benxi = benxi;
				this.fee_gjj_lilv = lilv;
				/**
				 * 显示结果
				 */
				 
			},
			/**
			 * 本金还款的月还款额(参数: 年利率 / 贷款总额 / 贷款总月份 / 贷款当前月0～length-1)
			 */
			getMonthMoney2: function(lilv, total, month, cur_month) {
				var lilv_month = lilv / 12; //月利率   
				var benjin_money = total / month;
				return (total - benjin_money * cur_month) * lilv_month + benjin_money;

			},
			/**
			 *本息还款的月还款额(参数: 年利率/贷款总额/贷款总月份)
			 */
			getMonthMoney1: function(lilv, total, month) {
				var lilv_month = lilv / 12; //月利率
				return total * lilv_month * Math.pow(1 + lilv_month, month) / (Math.pow(1 + lilv_month, month) - 1);
			},
			getlilv: function(zuhe_type) {

				/**商业贷款 */
				if (zuhe_type == 1) {
					var lilv = this.sy_lilv_base;

				} else if (zuhe_type == 2) {
					var lilv = this.gjj_lilv_base;

				}
				return lilv;
			},
		}
	}
</script>

<style>
	.bg{
		background-color: #fff;
		padding:10px 0px
	}
	.form-table {
		margin: 30rpx;
	}

	.up-submit {
		margin-top: 12rpx;
	}

	/*显示结果*/
	.result {
		margin-top: 15rpx;
		padding-bottom: 100rpx;
		font-size: 24rpx;
	}

	.result .restab {
		margin-bottom: 30rpx;
	}

	 
	.result .total {
		text-align: center;
	}

	.result .total .num {
		color: #ff0000;
		font-size: 40rpx;
	}

	.result .per {
		margin-top: 30rpx;
		display: flex;
		flex-direction: row;
	}

	.per .peritem {
		flex-grow: 1;
		text-align: center;
	}
	.benxi{
		margin:20rpx;
	}
	.btitle {
		border-bottom: #dadada 1rpx solid;
		padding: 30rpx;
		margin: 30rpx 0rpx;
	}
	.monthlist{
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.monthlist .item {
		display: flex;
		flex-direction: row;
		font-size: 24rpx;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
		padding: 10rpx;
	}

	.monthlist .item view {
		 
		text-align: left;		 
	}

	.monthlist .bhead {
		font-size: 24rpx;
		padding-bottom: 20rpx;
	}

	.monthlist .item view:first-child {
		text-align: left; 
	}
	.monthlist .item view:last {
		text-align: right;
		 
	}
	
</style>